<template>
  <VPage>
    <div class="mx-[10px]">
      <el-tabs v-model="activeName">
        <el-tab-pane label="清关发票登记" name="1"></el-tab-pane>
        <el-tab-pane label="报关登记" name="2"></el-tab-pane>
      </el-tabs>
    </div>
    <template v-if="activeName == 1">
      <ClearanceRecord :optionsData="optionsDataAll" />
    </template>
    <template v-else>
      <DeclarationRecord :optionsData="optionsDataAll" />
    </template>
  </VPage>
</template>
<script setup lang="jsx">
import ClearanceRecord from "./components/ClearanceRecord/index";
import DeclarationRecord from "./components/DeclarationRecord/index";
import { useEnumSelect } from "@/hooks/useEnumSelect.js";
import { getCountry, logisticsList, getChannelList } from "@/api/index.js";
import { getWarehouseOptions } from "@/api/public.js";
const activeName = ref("1");
const { options: optionsData1 } = useEnumSelect({
  params: [
    "transport_type",
    "has_tax",
    "cls_invoice_shipment_type",
    "cls_invoice_register_department",
    "cls_invoice_register_channel",
  ],
});
const optionsData = ref({});
const getCountrylist = async () => {
  const { data } = await getCountry();
  optionsData.value.country = data || [];
};
getCountrylist();
const getWarehouselist = async () => {
  const { data } = await getWarehouseOptions();
  optionsData.value.warehouse = data || [];
};
getWarehouselist();
const getLogisticsList = async () => {
  const { data } = await logisticsList();
  optionsData.value.logisticsList = data || [];
};
getLogisticsList();
const getChannel = async () => {
  const { data } = await getChannelList();
  optionsData.value.channel = data || [];
};
getChannel();

const optionsDataAll = computed(() =>
  Object.assign({}, optionsData.value, optionsData1.value)
);
</script>
<style scoped lang="scss">
:deep(.el-tabs__header) {
  margin: 0;
}
</style>
